﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>使用CSS3基本选择器</title>
	<style type="text/css">
		*{margin: 0;padding:0;}
		.clearfix:after,.clearfix:before{display:table;content:""}
		.clearfix:after{clear:both;overflow:hidden}
		.demo { width: 250px; border: 1px solid #ccc; padding: 10px;margin: 20px auto}  
		li {list-style:none outside none; float: left; height: 20px; line-height: 20px; width: 20px;border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }
		.demo *{background: orange}
		ul {background:grey}
		#first{background:lime;color:#000}
		#last {background:#000;color:lime}
		.item {background: green;color: #fff;font-weight:bold}
		.item.important {background:red;}
	</style>
</head>
<body>
	<ul class="clearfix demo">
		<li class="first" id="first">1</li>
		<li class="active">2</li>
		<li class="important item">3</li>
		<li class="important">4</li>
		<li class="item">5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li class="last" id="last">10</li>
	</ul>
</body>
</html>